<template>
  <div>
    <van-nav-bar title="黑马头条" left-arrow @click-left="$router.back()" />
    <div class="content">
      <h3 class="title">{{ articleInfo.title }}</h3>
      <div class="author">
        <div class="left">
          <van-image
            round
            width="0.8rem"
            height="0.8rem"
            :src="articleInfo.aut_photo"
          />
          <div class="name">
            <span>{{ articleInfo.aut_name }}</span>
            <span>{{ timeFrom }}</span>
          </div>
        </div>
        <div class="right">
          <van-button
            v-if="!articleInfo.is_followed"
            round
            type="info"
            size="mini"
            @click="isfollowed(articleInfo.aut_id)"
            >+关注</van-button
          >
          <van-button
            v-else
            round
            type="info"
            @click="noFollowed(articleInfo.aut_id)"
            size="mini"
            >取消关注</van-button
          >
        </div>
      </div>
    </div>

    <!--  内容主体 -->
    <div
      ref="content"
      class="article-content markdown-body main"
      v-html="articleInfo.content"
    ></div>
    <div class="stare">内容结束</div>
    <div class="comment">
      <comment-article
        v-for="(item, index) in commentsList"
        :key="item.end_id"
        :CommitItemObj="item"
        :index="index"
        @update-is_liking="updateLiking"
        @Reply="ReplyChange"
      />
      <div class="stare">没有更多了~~</div>
    </div>
    <div class="floot">
      <van-button @click="isPopuShow = true" round size="small"
        >写评论</van-button
      >
      <van-icon
        class="van-icon van-icon-comment-o"
        :badge="articleInfo.comm_count"
      ></van-icon>
      <van-icon
        v-if="!articleInfo.is_followed"
        class="van-icon van-icon-star-o"
        @click="collectArticles"
      ></van-icon>
      <van-icon
        v-else
        class="van-icon van-icon-star-o color"
        @click="collectArticles"
      ></van-icon>
      <van-icon
        v-if="!articleInfo.like_count"
        class="van-icon van-icon-good-job-o"
        @click="LiveArticles"
      ></van-icon>
      <van-icon
        v-else
        class="van-icon van-icon-good-job-o color"
        @click="NoLiveArticles"
      ></van-icon>
      <van-icon class="van-icon van-icon-share"></van-icon>
    </div>
    <!-- 评论弹窗 -->
    <van-popup
      v-model="isPopuShow"
      close-icon-position="top-left"
      position="bottom"
      :style="{ height: '15%' }"
      ><commentPopup
        v-if="isPopuShow"
        @updata-popu="isPopuShow = false"
        @update-list=";[commentsList.unshift($event), articleInfo.comm_count++]"
        :art_id="art_id"
        :articleInfo="articleInfo"
    /></van-popup>

    <!-- 评论的评论弹窗 -->
    <van-popup
      v-model="isShowReply"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <reply
        v-if="isShowReply"
        :ReplyObj="ReplyObj"
        :index="reIndex"
        @close="isShowReply = false"
        @updateLiking="updateLiking"
        :art_id="art_id"
        @AddReply=";[ReplyObj.reply_count++, articleInfo.comm_count++]"
      />
    </van-popup>
  </div>
</template>

<script>
import { ImagePreview } from 'vant'
import dayjs from '@/utils/dayjs'
import './github-markdown.css'
import commentArticle from './components/commentArticle.vue'
import commentPopup from './components/commentPoup.vue'
import reply from './components/reply.vue'
import {
  getArticlesInfoAPI,
  followedAPI,
  noFollowAPI,
  ArticlesLiveAPi,
  unArticlesLiveAPi,
  collectArticlesAPI,
  noCollectArticlesAPI,
  getCommentAPI
} from '@/api'
export default {
  name: 'articleIndex',
  components: {
    commentArticle,
    commentPopup,
    reply
  },
  props: {
    art_id: {
      type: [Number, String],
      required: true
    }
  },
  data() {
    return {
      // 文章信息
      articleInfo: {},
      // 评论列表
      commentsList: [],
      // 评论显示框
      isPopuShow: false,
      // 评论的评论弹窗
      isShowReply: false,
      // 评论的对象
      ReplyObj: {},
      // 评论的索引
      reIndex: 0
    }
  },
  computed: {
    timeFrom() {
      return dayjs(this.articleInfo.pubdate).fromNow()
    }
  },
  watch: {},
  created() {
    this.getArticlesInfo()
    this.getComment()
  },
  methods: {
    // 获取文章信息
    async getArticlesInfo() {
      this.$toast.loading({
        message: '文章内容加载中....',
        forbidClick: true,
        duration: 0
      })
      const { data } = await getArticlesInfoAPI(this.art_id)
      this.articleInfo = data.data
      setTimeout(() => {
        const images = this.$refs.content.querySelectorAll('img')
        const img = []
        images.forEach((item, index) => {
          img.push(item.src)
          item.addEventListener('click', () => {
            ImagePreview({
              images: img,
              // 起始位置
              startPosition: index
            })
          })
        })
      }, 0)
      this.$toast.clear()
    },
    // 关注用户
    async isfollowed(id) {
      try {
        await followedAPI(id)
        this.articleInfo.is_followed = true
        this.$toast.success('关注成功')
      } catch (err) {
        if (err.request.status === 400) this.$toast.fail('自己不能关注自己')
        this.$toast.fail('关注失败')
      }
    },
    // 取消关注
    async noFollowed(id) {
      try {
        await noFollowAPI(id)
        this.articleInfo.is_followed = false
        this.$toast.success('取消关注成功！')
      } catch (err) {
      }
    },
    // 对文章点赞
    async LiveArticles() {
      try {
        await ArticlesLiveAPi(this.articleInfo.art_id)
        this.articleInfo.like_count = 1
        this.$toast.success('点赞成功！')
      } catch (error) {
        this.$toast.fail('点赞失败！')
      }
    },
    // 取消点赞
    async NoLiveArticles() {
      try {
        await unArticlesLiveAPi(this.articleInfo.art_id)
        this.articleInfo.like_count = 0
        this.$toast.success('取消点赞成功！')
      } catch (error) {
        this.$toast.fail('取消点赞失败！')
      }
    },
    // 收藏文章 和 取消收藏文章
    async collectArticles() {
      if (!this.articleInfo.is_followed) {
        try {
          await collectArticlesAPI(this.articleInfo.art_id)
          this.articleInfo.is_followed = true
          this.$toast.success('收藏成功！')
        } catch (error) {
          this.$toast.fail('收藏失败！')
        }
      } else {
        try {
          await noCollectArticlesAPI(this.articleInfo.art_id)
          this.articleInfo.is_followed = false
          this.$toast.success('取消收藏成功！')
        } catch (error) {
          this.$toast.fail('取消收藏失败！')
        }
      }
    },
    // 获取文章评论
    async getComment() {
      try {
        const { data } = await getCommentAPI({
          type: 'a',
          source: this.art_id
        })
        this.commentsList = data.data.results
      } catch (error) {
        this.$toast.fail('获取评论失败！')
      }
    },
    // 评论点赞
    updateLiking(index, val) {
      this.commentsList[index].is_liking = val
      if (val === true) {
        this.commentsList[index].like_count++
      } else {
        this.commentsList[index].like_count--
      }
    },
    // 评论的评论
    ReplyChange(obj, index) {
      this.ReplyObj = obj
      this.reIndex = index
      this.isShowReply = true
    }
  }
}
</script>

<style scoped lang="less">
.comment {
  padding: 0 0 100px 0;
}
:deep(.van-nav-bar__content) {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}
.main {
  padding: 0 32px 0 32px;
}
.stare {
  text-align: center;
  align-items: center;
  margin: 0.42667rem 0;
  color: #969799;
  font-size: 0.37333rem;
  line-height: 0.64rem;
  border-color: #ebedf0;
  border-style: solid;
  border-width: 0;
}
:deep(.van-nav-bar__content) {
  background-color: #3296fa;
  .van-nav-bar__title {
    color: #fff;
  }
  .van-icon-arrow-left {
    color: #fff;
  }
}
.content {
  padding: 0 0 88px 0;
}
.title {
  font-size: 40px;
  color: #3a3a3a;
  padding: 50px 32px;
}
.author {
  display: flex;
  justify-content: space-between;
  padding: 0 32px 50px;
  .name {
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    font-size: 24px;
  }
  .left {
    display: flex;
    align-content: center;
  }
  :deep(.van-button--info) {
    width: 170px;
    height: 58px;
  }
}
.floot {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  border-top: 2px solid #e0e0e0;
  height: 88px;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  .van-button {
    width: 282px;
    height: 45px;
  }
  .van-icon {
    font-size: 0.53333rem;
    color: rgb(119, 119, 119);
  }
}
.color {
  color: orangered !important;
}
</style>
